<template>
  <div id="cart">
    <NavBar class="cart-nav">
      <template v-slot:center>
        <!-- <div>购物车({{cartLength}})</div> -->
        <div>购物车({{length}})</div>
      </template>
    </NavBar>

    <Scroll ref="scroll" class="content">
      <CartList />
    </Scroll>

    <CartBottomBar class="nav-btm" />
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar.vue";
import Scroll from "@/components/common/scroll/Scroll.vue";

import CartList from "./children/CartList";
import CartBottomBar from "./children/CartBottomBar";

import { mapGetters } from "vuex";

export default {
  name: "cart",
  components: {
    NavBar,
    CartList,
    Scroll,
    CartBottomBar
  },
  computed: {
    // cartLength() {
    //   return this.$store.getters.cartLength;
    // }
    // 两种写法
    // ...mapGetters(["cartLength", "cartList"])
    ...mapGetters({
      length: "cartLength",
      list: "cartList"
    })
  },
  activated() {
    this.$refs.scroll.refresh();
  }
};
</script>

<style scoped>
#cart {
  width: 100%;
  height: 100vh;
  padding-top: 44px;
}
.cart-nav {
  background: var(--color-tint);
  color: #fff;
  font-size: 16px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 3;
}
.content {
  height: calc(100% - 90px);
}
.nav-btm {
  position: fixed;
  bottom: 49px;
  left: 0;
  right: 0;
}
</style>